<template>
  <j-modal
    :width="width"
    :visible="visible"
    switchFullscreen
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleClose"
    cancelText="关闭"
  >
    <template slot="title">
      <div class="title">
        {{ title }}<span>卖家记号：{{ model.sellerId }} </span>
      </div>
    </template>
    <template slot="footer">
        <a-button @click="handleClose">关闭 </a-button>
    </template>
    <a-alert show-icon type="warning">
      <template slot="message">此处支持<b style="color: #f59a23fd">作废未生效</b>的记录 </template>
    </a-alert>
    <a-table
      ref="table"
      size="middle"
      :scroll="{ x: 1300 }"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      class="j-table-force-nowrap"
      @change="handleTableChange"
    >
    <!-- 生效，作废时间 -->
    <template slot="effectChangeTimeSlot" slot-scope="text, record">
        <!-- 1:未生效  2.已生效  3.已作废 -->
      <span v-if="record.progressStatus === '1'" style="color:#f59a23;">{{moment(record.effectChangeTime).format('YYYY/MM/DD HH:mm:ss')}}</span>
      <span v-if="record.progressStatus === '2'" style="color:#63a103">{{ moment(record.effectChangeTime).format('YYYY/MM/DD HH:mm:ss')}}</span>  
      <span v-if="record.progressStatus === '3'" style="color:#aaaaaa">{{ moment(record.cancelTime).format('YYYY/MM/DD HH:mm:ss')}}</span>    
    </template>
      <span slot="actionSlot" slot-scope="text, record">
        <!-- 使用style 去控制作废按钮的显示与隐藏，是为了占位，避免单元格样式错乱 -->
        <a-popconfirm title="你确定作废变更吗？" @confirm="() => handleCancel(record.id)" :style="{visibility:record.progressStatus === '1'?'visible':'hidden'}">
            <a>作废</a>
        </a-popconfirm>
      </span>
    </a-table>
  </j-modal>
</template>
  
  <script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import moment from 'moment'
export default {
  name: 'StoreCostChangeRecord',
  mixins: [mixinDevice, JeecgListMixin],
  data() {
    return {
      title: '',
      width: 1000,
      visible: false,
      disableSubmit: false,
      model: {},
      disableMixinCreated: true, //手动调用加载数据方法
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          width: 150, 
          title: '店铺名称',
          align: 'center',
          dataIndex: 'storeName',
          ellipsis:true,
        },
        {
          width: 150,  
          title: '成本中心(变更前)',
          align: 'center',
          dataIndex: 'costCenterIdBefore_dictText',
          ellipsis:true,
        },
        {
          width: 150, 
          title: '成本中心(变更后)',
          align: 'center',
          dataIndex: 'costCenterIdAfter_dictText',
          ellipsis:true,
        },
        {
          width: 150,   
          title: '店铺负责人',
          align: 'center',
          dataIndex: 'storeDirector',
          ellipsis:true,
        },
        {
          width: 100,   
          title: '变更人',
          align: 'center',
          dataIndex: 'createBy',
          ellipsis:true,
        },
        {
          width: 150,   
          title: '申请时间',
          align: 'center',
          dataIndex: 'askChangeTime',
        },
        {
          width: 150,   
          title: '生效/作废时间',
          align: 'center',
          dataIndex: 'effectChangeTime',
          scopedSlots:{ customRender:'effectChangeTimeSlot' }
        },
        {
          title: '变更进度',
          align: 'center',
          dataIndex: 'progressStatus_dictText',
          customCell:(record, rowIndex)=>{
           // 0:无记录  1：未生效  2.已生效  3.已作废
           if(record.progressStatus === '1'){
             return { style: { color: '#f59a23' } }
           }else if(record.progressStatus === '2'){
            return { style:{color:'#63a103'} }
           }else if(record.progressStatus === '3'){
            return { style:{color:'#aaaaaa'} }
           }else{
            return { style:{color:'#333333'} }
           }
          }
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          fixed: 'right',
          width: 100,
          scopedSlots:{ customRender:'actionSlot' }
        },
      ],
      url:{
        list:'/hzkj-oms/oms/costChange/storeCostChangeRecord/list',
        cancel:'/hzkj-oms/oms/costChange/storeCostChangeRecord/cancel',
      }
    }
  },
  methods: {
    moment,
    showModal(record) {
      this.title = '成本中心变更记录'
      this.model = Object.assign({}, record)
      this.queryParam.storeId = record.id
      this.loadData(1)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleClose() {
      this.$emit('ok')
      this.visible = false
    },
    //作废
    handleCancel(id){
     getAction(this.url.cancel,{id:id}).then(res=>{
        if(res.success){
         this.$message.success(res.message)
         this.loadData()
        }else{
         this.$message.warning(res.message)
        }
     })
    },
  },
}
</script>
  <style lang="less" scoped>
  /deep/.ant-modal-body{
    padding:10px 24px;
  }
  /deep/.ant-alert{
    margin-bottom: 10px;
  }
.title {
  color: #000000a5;
  font-weight: bold;
  span {
    color: #000000;
    //  font-size: 14px;
    margin-left: 25px;
  }
}
</style>